<template>
	<div class="auto-trade">
		<bread-crumb divider>
			<template slot="title">卡券创建</template>
		</bread-crumb>
		<div class="form-wrap" v-loading="loading">
			<el-form
				:model="submitData"
				:rules="rules"
				ref="myForm"
				size="big"
				:inline="false" label-width="120px" labelPosition="left" class="demo-form-inline"
			>
				<el-form-item label="商户名称:" prop="merchantName">
					<el-input v-model.trim="submitData.merchantName" placeholder="请输入"></el-input>
				</el-form-item>

				<el-form-item label="卡券名称:" prop="stockName">
					<el-input v-model.trim="submitData.stockName" placeholder="请输入"></el-input>
				</el-form-item>

				<el-form-item label="卡券价值:" prop="couponAmount">
					<el-input v-model.trim="submitData.couponAmount" placeholder="请输入" class="w200"></el-input>
					<span>单位：元</span>
				</el-form-item>

				<el-form-item label="使用门槛:" prop="transactionMinimum">
					<el-input v-model.trim="submitData.transactionMinimum" placeholder="请输入"class="w200"></el-input>
					<span>单位：元</span>
				</el-form-item>

				<el-form-item label="发行数量:" prop="maxCoupons">
					<el-input v-model.trim="submitData.maxCoupons" placeholder="请输入"class="w200"></el-input>
				</el-form-item>

				<el-form-item label="领取张数:" prop="maxCouponsPerUser">
					<el-input v-model.trim="submitData.maxCouponsPerUser" placeholder="请输入"class="w200"></el-input>
				</el-form-item>

				<el-form-item label="券code模式:" prop="couponCodeMode">
					<el-input v-model.trim="submitData.couponCodeMode" placeholder="请输入" readonly></el-input>
				</el-form-item>

				<el-form-item label="开始时间" prop="useTimeStart">
					<el-date-picker type="datetime" placeholder="开始时间" v-model="submitData.useTimeStart"  value-format="yyyy-MM-dd HH:mm:ss" style="width: 220px"></el-date-picker>
				</el-form-item>

				<el-form-item label="结束时间" prop="useTimeEnd">
					<el-date-picker type="datetime" placeholder="结束时间" v-model="submitData.useTimeEnd" value-format="yyyy-MM-dd HH:mm:ss"  style="width: 220px;"></el-date-picker>
				</el-form-item>

			</el-form>
			<el-button @click="submitForm" type="primary">提交</el-button>
		</div>
	</div>
</template>

<script>
import {
	apiCouponCreateOfBusiness,
} from '@/axios/api.system';
import { mixins } from '@/mixins/mixins.global';
import { mixinUtils } from '@/mixins/mixins.utils';
import breadCrumb from '@/views/components/breadCrumb';

export default {
	name: 'couponCreate',
	mixins:[mixins,mixinUtils],
	components:{breadCrumb},
	data() {

		//验证数量
		let validaterAmount = (rule, value, callback) =>{
			if (value == false ) {
				callback(new Error('必须输入'));
			}else if(!(/(^[1-9]\d*$)/.test(value))){
				callback(new Error('必须是正整数'));
			} else {
				callback();
			}
		}
		return {
			submitData: {
				stockName         : '',
				merchantName      : '泉州卓恩家居',
				couponAmount      : 100,
				transactionMinimum: 1000,
				maxCoupons        : 10000,
				maxCouponsPerUser : 100,
				couponCodeMode    : 'WECHATPAY_MODE',
				useTimeStart    : '',
				useTimeEnd    : '',
			},
			rules: {
				stockName: [
					{ required: true, message: '请输券的名称', trigger: 'blur' },
					{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
				],
				merchantName: [
					{ required: true, message: '请输商户名称名称', trigger: 'blur' },
					{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
				],
				couponAmount      : [{ validator: validaterAmount, trigger: 'blur' }],
				transactionMinimum: [{ validator: validaterAmount, trigger: 'blur' }],
				maxCoupons        : [{ validator: validaterAmount, trigger: 'blur' }],
				maxCouponsPerUser : [{ validator: validaterAmount, trigger: 'blur' }],
				useTimeStart: [{ required: true, message: '请选择日期', trigger: 'change' }],
				useTimeEnd: [{  required: true, message: '请选择日期', trigger: 'change' }],
			}
		}
	},
	created() {
	},
	methods:{

		//表单提交
		submitForm() {
			this.$refs['myForm'].validate((valid) => {
				if (valid) {
					console.log('验证通过，可以提交!');
					apiCouponCreateOfBusiness(this.submitData).then((res)=>{
						if(res.resultFlag==true){
							this.notify('成功',res.resultMsg,'success')
						}else{
							this.notify('错误',res.resultMsg,'error')
						}
					})

				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>

<style lang="less">

</style>
